<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="initial-scale=1.0,
                   maximum-scale=1.0">
    <title>进阶篇-用transition组件轻松实现过渡效果</title>
    <script src="../js/lib/vue.min.js"></script>
    <style>
        /*box节点本身的样式*/
        .box {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            background: #ff8282;
            color: #Fff;
            /*以下两个默认值，可不写*/
            /*写上只是为了便于讲解，记住这两个*/
            opacity: 1;
            margin-left: 0;
        }
        .container{
            width: 200px;
            height: 200px;
            background: #ccd7e2;
            margin-top: 20px;
        }

        .box-enter-active, .box-leave-active {
            transition: all .8s;
        }

        .box-enter {
            opacity: 0;
            margin-left: 100%;
        }

        .box-leave-active {
            opacity: 0;
            margin-left: 100%;
        }
    </style>
</head>
<body>
<div id="app" class="app">
    <!--实现简单的过渡效果-->
    <button class="btn" @click="showBox = !showBox">切换</button>
    <div class="container">
        <transition name="box">
        <div v-show="showBox" class="box">I am the box</div>
        </transition>
    </div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            showBox:false
        },
        methods:{
        }
    });
</script>
</body>
</html>